<template>
  <div class="menu">
    <div class="header"><img @click="fanhui()" class="fanhui" src="login/1.png" alt=""> 冲调茶饮</div>
    <div class="menu-main">
      <div class="left-bat">
        <router-link to="/gmenua">咖啡周边</router-link>
        <router-link to="/gmenub">冲调茶饮</router-link>
        <router-link to="/gmenuc">休闲零食</router-link>
        <router-link to="/gmenud">家庭日用</router-link>
        <router-link to="/gmenue">舒适办公</router-link>
        <router-link to="/gmenuf">美妆个护</router-link>
        <router-link to="/gmenug">数码配件</router-link>
        <router-link to="/gmenuh">生活电器</router-link>
        <router-link to="/gmenui">潮玩饰品</router-link>
      </div>
      <router-view></router-view>
    </div> 
  </div>
</template>

<script>
export default {
  
  data() {
    return {
      type:"新品首发"
    }
  },
  created() {
    console.log(this.$route.query.type)
    this.type=this.$route.query.type
    console.log(this.type)
    switch(this.type){
      case "咖啡周边":{
        this.$router.push({path:"/gmenua",query:{type:this.type}})
        break
      }
      case "冲调茶饮":{
        this.$router.push({path:"/gmenub",query:{type:this.type}})
        break
      }
      case "休闲零食":{
        this.$router.push({path:"/gmenuc",query:{type:this.type}})
        break
      }
      case "家庭日用":{
        this.$router.push({path:"/gmenud",query:{type:this.type}})
        break
      }
      case "舒适办公":{
        this.$router.push({path:"/gmenue",query:{type:this.type}})
        break
      }
      case "美妆个护":{
        this.$router.push({path:"/gmenuf",query:{type:this.type}})
        break
      }
      case "数码配件":{
        this.$router.push({path:"/gmenug",query:{type:this.type}})
        break
      }
      case "生活电器":{
        this.$router.push({path:"/gmenuh",query:{type:this.type}})
        break
      }
      case "潮玩饰品":{
        this.$router.push({path:"/gmenui",query:{type:this.type}})
        break
      }
      default:{
        alert("抱歉出错了")
        this.$router.push("/tide")
      }
    }

    // this.type=this.$route.type
    // let url = `/api/goods/${this.type}/`
    // this.$store.dispatch("goodsmenu",{url})
  },
  mounted(){
    document.querySelector('#app').setAttribute('style',"height:100%"),
    document.querySelector('html').setAttribute('style',"height:100%;overflow:hidden;background-color:#fefefe;"),
    document.querySelector('body').setAttribute('style',"height:100%;overflow:hidden;background-color:#fefefe;")
  },
  beforeDestroy(){
    document.querySelector('#app').removeAttribute('style')
    document.querySelector('html').removeAttribute('style')
    document.querySelector('body').removeAttribute('style')
  },
  methods: {
    fanhui(){
      this.$router.push("/tide")
    }
  },

}
</script>
<style>
.goods-menu{
  background-color: #fefefe;
}
</style>

<style scoped>
.header{
    width: 100%;
    height: 0.5rem;
    background-color: #f5f5f5;
    text-align: center;
    line-height: 0.5rem;
    font-size: 0.18rem;
    color: rgb(0, 0, 0);
    font-weight: 500;
    position: relative;
}
.menu{
  display: flex;
  flex-direction: column;
  height: 100%;
}
.menu-main{
  flex: 1;
  /* background-color: aqua; */
  display: flex;
  height: 100%;
    /* justify-content: flex-end;
    align-items: flex-end; */
}
.left-bat{
width: 0.8rem;
display: flex;
justify-content: flex-start;
flex-direction: column;
height: 100%;
background-color: #f5f5f5;

}
/* router-link-activ */
.left-bat>a{
  height: 0.45rem;
  line-height: 0.45rem;
  text-align: center;
  font-size: 0.12rem;
}
.menu-main>div:nth-child(2){
  flex: 1;
  padding: 0.1rem;
  overflow: auto;
  /* display: flex; */
  flex-wrap: wrap;
  height: 100%;
  /* align-items: flex-start; */
  /* justify-content: flex-start; */

  /* align-items: flex-end; */
}
.router-link-active{
  background-color: #fefefe;
}
.fanhui{
  position: absolute;
  top: 0.08rem;
  left: 0.05rem;
  height: 0.35rem;
}
</style>